<template>
  <el-dialog
    :title="title"
    :visible="dialogFormVisible"
    width="50%"
    @close="closeFn"
  >
    <el-form ref="registerForm" :model="formData" :rules="rules">
      <el-form-item label="权限名称" prop="title">
        <el-input v-model.trim="formData.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model.trim="formData.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="formData.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="confirmFn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 引入
import { addPermissions, getPermissionsById, editPermissions } from '@/api/permissions'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        id: '',
        title: '',
        code: '',
        description: '',
        pid: '',
        type: '',
        created_at: '',
        updated_at: ''
      },
      rules: {
        title: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' }
        ]
      },
      title: ''
    }
  },
  methods: {
    // 关闭弹框且重置校验
    closeFn() {
      this.$emit('update:dialogFormVisible', false)
      this.$refs.registerForm.resetFields()
      this.$emit('updataFnPermissionList')
    },
    // 弹框确认--父组件执行函数
    async confirmFn() {
      this.$emit('confirmFn', this.formData)
      //   await this.$refs.registerForm.validate()
      //   try {
      //     this.$message.success('成功')
      //   } catch (error) {
      //     this.$message.error(error.message)
      //   }
    },
    // 封装新增接口函数
    async addPermissions(data) {
      await this.$refs.registerForm.validate()
      try {
        await addPermissions(data)
        this.$message.success('成功')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    // 封装编辑权限的信息回填函数
    async getPermissionsById(id) {
      const res = await getPermissionsById(id)
      this.formData = res.data
    },
    // 封装编辑权限的函数
    async editPermissions(data) {
      await this.$refs.registerForm.validate()
      try {
        await editPermissions(data)
        this.$message.success('成功')
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  }
}
</script>

<style>
</style>
